<template>
	<view class="login-page">
		<view class="login-page-title">{{pageType === 2? '重置密码' : '注册账号'}}</view>
		<view class="login-page-tips" v-show="!hasSendVcode"><text class="deep-color" v-show="pageType !== 2">{{phoneNum}}未注册,请先完成注册</text></view>
		<view class="login-page-tips" v-show="hasSendVcode">验证码已发送至手机：<text class="deep-color">{{phoneNum}}</text></view>

		<view class="input-bar mb60">
			<input class="input" type="number" placeholder-class="input-plc" maxlength="6" v-model="vCode"
				placeholder="请输入验证码"></input>
			<text class="resend-btn" v-show="countTime < 0" @tap="toSendVcode">发送验证码</text>
			<text class="count" v-show="countTime >= 0">{{countTime}}s后重新获取</text>
		</view>

		<!-- <view class="input-bar no-mt">
			<input class="input" placeholder-class="input-plc" :password="!eyesOpen" maxlength="16" v-model="password"
				:placeholder="pageType === 2 ?'请设置新的登录密码':'请设置登录密码'"></input>
			<image class="eyes-icon" v-show="!eyesOpen" src="../../static/closeEyeIcon.png" @tap.stop="toggleEyes">
			</image>
			<image class="eyes-icon" v-show="eyesOpen" src="../../static/openEyeIcon.png" @tap.stop="toggleEyes">
			</image>
		</view> -->

		<!-- <view class="password-vaild-items">
			<view class="vaild-item" :class="{'active':valid1Pass}">
				<image v-show="!valid1Pass" class="item-icon" src="../../static/greyGouIcon.png"></image>
				<image v-show="valid1Pass" class="item-icon" src="../../static/blueGouIcon.png"></image>
				<text class="item-text">8-16个字符</text>
			</view>
			<view class="vaild-item" :class="{'active':valid2Pass}">
				<image v-show="!valid2Pass" class="item-icon" src="../../static/greyGouIcon.png"></image>
				<image v-show="valid2Pass" class="item-icon" src="../../static/blueGouIcon.png"></image>
				<text class="item-text">包含字母</text>
			</view>
			<view class="vaild-item" :class="{'active':valid3Pass}">
				<image v-show="!valid3Pass" class="item-icon" src="../../static/greyGouIcon.png"></image>
				<image v-show="valid3Pass" class="item-icon" src="../../static/blueGouIcon.png"></image>
				<text class="item-text">包含数字</text>
			</view>
		</view> -->
		

		<!-- <largeBtn :disabled="btnDisabled || !valid1Pass || !valid2Pass || !valid3Pass" @btnClk="submit">
			{{pageType === 2? '重置密码' : '注册并登录'}}
		</largeBtn> -->

		<largeBtn :disabled="btnDisabled" @btnClk="submit">
			{{pageType === 2? '重置密码' : '注册并登录'}}
		</largeBtn>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				phoneNum: '',
				vCode: '',
				password: '',
				countTime: -1,
				eyesOpen: false,
				pageType: 1, // 1:手机登录时注册账号 2：重置密码 3：微信登录时注册账号
				hasSendVcode: false
			}
		},
		computed: {
			...mapState(['fromVirtualId','fromUserId']),
			btnDisabled() {
				const flag = /\d{6}/.test(this.vCode)
				return !flag
			},
			valid1Pass() {
				const flag = /^.{8,16}$/.test(this.password)
				return flag
			},
			valid2Pass() {
				const flag = /[a-zA-Z]/.test(this.password)
				return flag
			},
			valid3Pass() {
				const flag = /\d/.test(this.password)
				return flag
			},
		},
		onLoad(options) {
			this.phoneNum = options.phone
			this.password = options.phone // 默认密码，20210829改 mike说不需要用户输密码了 默认手机号当做密码
			this.pageType = options.pageType * 1
		},
		mounted() {
			
		},
		beforeDestroy() {
			this.clearTimer()
		},
		methods: {
			sendVcode() {
				if(!this.hasSendVcode){
					this.hasSendVcode = true
				}
				// 发送验证码
				this.$api.sendVcode({
					phone: this.phoneNum
				})
			},
			startCount() {
				this.countTime = 60
				this.timeCount()
			},
			timeCount() {
				this.countTimer = setTimeout(() => {
					this.countTime--;
					if (this.countTime < 0) {
						this.clearTimer()
					} else {
						this.timeCount()
					}
				}, 1000)
			},
			clearTimer() {
				if (this.countTimer) {
					clearTimeout(this.countTimer)
					this.countTimer = null
				}
			},
			submit() {
				if (this.pageType === 2) {
					this.submitUpdatePwd()
				} else {
					this.submitRegister()
				}
			},
			toSendVcode() {
				this.sendVcode()
				this.startCount()
			},
			// 重置密码
			submitUpdatePwd() {
				this.$api.updatePwd({
					phone: this.phoneNum,
					code: this.vCode,
					newPassword: this.password
				}).then(() => {
					this.showTipsThenReturn('密码已重置')
				})
			},

			// 注册
			submitRegister() {
				if (this.pageType === 3) {
					// 微信登录时绑定手机时发现未注册时得同时注册
					this.$api.registerByWx({
						account: this.$store.state.userWxOpenidData.openid,
						phone: this.phoneNum,
						checkCode: this.vCode,
						password: this.password,
					}).then(() => {
						// 直接再调一遍登录让用户直接登录
						this.loginByWx({
							account: this.$store.state.userWxOpenidData.openid,
							nickName: this.$store.state.userWxProfile.nickName,
							phone: this.phoneNum,
							avatar: this.$store.state.userWxProfile.avatarUrl
						})
					})
				}else{
					// 手机登录时未注册时的注册
					this.$api.registerByPhone({
						phone: this.phoneNum,
						code: this.vCode,
						password: this.password
					}).then(() => {
						// 主动调登录
						this.$api.login({ phone: this.phoneNum ,password: this.password}).then((res) => {
							this.$setToken(res)
							this.$getGlobalDataWhenLogin()
							this.showTipsThenJumpToIndex('注册成功,登录跳转中...')
						})
					})
				}

			},

			loginByWx(data){
				this.$api.loginByWx(data).then((res)=>{
					this.$setToken(res)
					// 微信登录，并且之前绑定过手机
					this.$getGlobalDataWhenLogin()
					this.showTipsThenJumpToIndex('注册成功,登录跳转中...')
				})
			},

			showTipsThenReturn(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/login/index'
					});
				}, 1500)
			},

			showTipsThenJumpToIndex(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
				setTimeout(() => {
					if(this.fromVirtualId){
                        uni.reLaunch({
					        url: `/pages/commentDetail/index?fromUserId=${this.fromUserId}&virtualId=${this.fromVirtualId}`
					    });
					}else{
	                    uni.reLaunch({
					        url: '/pages/index/index?type=1'
					    });
					}
				}, 1500)
			},

			toggleEyes() {
				this.eyesOpen = !this.eyesOpen
			}
		}
	}
</script>

<style lang="less" scoped>
	.login-page {
		width: 670rpx;
		margin: 0 auto;
		padding-top: 54rpx;

		.login-page-title {
			font-size: 48rpx;
			font-weight: 400;
			color: #323746;
			line-height: 60rpx;
		}

		.login-page-tips {
			margin-top: 16rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #9196A0;
			line-height: 32rpx;
			height: 32rpx;

			.deep-color {
				color: #323746;
			}
		}

		.input-bar {
			margin-top: 60rpx;
			margin-bottom: 20rpx;
			height: 120rpx;
			border-bottom: 2rpx solid #DDDDDD;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&.no-mb {
				margin-bottom: 0rpx;
			}
			&.mb60{
				margin-bottom: 60rpx;
			}

			&.no-mt {
				margin-top: 0rpx;
			}

			.input {
				width: 90%;
				font-size: 36rpx;
				font-weight: 400;
				color: #333;
				line-height: 44rpx;
			}

			.input-plc {
				color: #ccc;
			}

			.resend-btn {
				white-space: nowrap;
				font-size: 24rpx;
				font-weight: 400;
				color: #2D82FF;
				line-height: 32rpx;
			}

			.count {
				white-space: nowrap;
				font-size: 24rpx;
				font-weight: 400;
				color: #9196A0;
				line-height: 32rpx;
			}

			.eyes-icon {
				width: 40rpx;
				height: 40rpx;
			}

		}
	}

	.password-vaild-items {
		display: flex;
		margin-bottom: 60rpx;

		.vaild-item {
			display: flex;
			align-items: center;
			margin-right: 48rpx;

			.item-icon {
				width: 22rpx;
				height: 22rpx;
				margin-right: 8rpx;
			}

			.item-text {
				font-size: 22rpx;
				color: #9196A0;
				line-height: 30rpx;
			}

			&.active {
				color: #323746;
			}
		}
	}
</style>
